<template>
  <!-- 全咨事业部之在建项目数据填报 -->
  <div id="divId" :style="{height: '450px',width: tableWidth}">
    <el-form :inline="true">
      <el-form-item label="年份选择">
        <el-select
          v-model="value"
          placeholder="请选择年份"
          @change="selectTime"
        >
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.lable"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="项目进展">
        <el-select v-model="value1" placeholder="请选择" @change="selectState">
          <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.lable"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 对应弹框ProjectBuildingActivityWindow -->
    <div>
      <el-dialog
        :visible.sync="windowVisible"
        append-to-body
        :close-on-click-modal="false"
      >
        <ProjectBuildingActivityWindow
          v-if="windowVisible"
          ref="popWindow"
          v-on:closeWindow="closeWindow"
          v-on:updateWindow="updateWindow"
        ></ProjectBuildingActivityWindow>
      </el-dialog>
    </div>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData.slice((pageNo - 1) * page_size, pageNo * page_size)"
          size="mini"
          style="width: 100%"
          max-height="450"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
          border="1px solid gray"
        >
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="clueName"
            align="center"
            label="信息提供人"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="项目前期跟踪"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="keyName"
            align="center"
            label="关键因素项目成功推动"
            width="160"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="contracts"
            align="center"
            label="成功落地签订合同"
            width="130"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="idGetDate"
            align="center"
            label="领取编号日期"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectId"
            align="center"
            label="项目编号"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectName"
            align="center"
            label="项目名称"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="customName"
            align="center"
            label="业主名称"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="contractAmount"
            align="center"
            label="合同金额（元）"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectType"
            align="center"
            label="项目类型"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectManager"
            align="center"
            label="项目经理"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectArea"
            align="center"
            label="项目区域"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectInvestment"
            align="center"
            label="工程投资（元）"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="projectProgess"
            align="center"
            label="项目进展"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="remark"
            align="center"
            label="备注"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                icon="el-icon-edit"
                size="mini"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="page_size"
            :page-sizes="[10, 20, 30]"
            layout="total, prev, pager, next, sizes"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProjectBuildingActivityWindow from '@/components/views/ProjectBuildingActivityWindow';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  components: {
    ProjectBuildingActivityWindow
  },
  data () {
    return {
      tableWidth: '',
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      windowVisible: false,
      addOperate: undefined,
      tableData: [],
      years: [],
      states: [
        {
          value: '全部',
          lable: '全部'
        },
        {
          value: '进行中',
          lable: '进行中'
        },
        {
          value: '已完成',
          lable: '已完成'
        }
      ],
      value: '',
      value1: '全部',
      total: 0,
      page_size: 10,
      pageNo: 1,
      isShowloading: false,
      year: '',
      state: '全部'
    };
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus();
      }
    }
  },
  watch: {
    'screenWidth': function (val) { // 监听屏幕宽度变化
      this.tableWidth = (Number(val) - 620) + 'px';
    }
  },
  mounted: function () {
    this.tableWidth = this.screenWidth - 620 + 'px'
    var _this = this;
    window.onresize = function () { // 定义窗口大小变更通知事件
      _this.screenWidth = document.documentElement.clientWidth; // 窗口宽度
    };
    this.loadYears();
    this.loadTableData();
  },
  methods: {
    loadYears () {
      let currentYear = new Date().getFullYear();
      this.value = currentYear;
      this.year = currentYear;
      this.years = [];
      this.years.push({ value: '全部', lable: '全部' });
      for (let i = 0; i < 11; i++) {
        this.years.push({
          value: currentYear - i,
          label: currentYear - i + '年'
        });
      }
    },
    // 年份选择
    selectTime (data) {
      this.year = data;
      this.loadTableData();
    },
    //  项目进展选择
    selectState (value) {
      this.state = value;
      this.loadTableData();
    },
    /**
     * 获取表格数据
     */
    loadTableData () {
      let params = {
        size: this.page_size,
        current: this.pageNo,
        year: this.year,
        state: this.state
      };
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listProjectBuilding(this, params)
          .then((res) => {
            this.tableData = res.data.records;
            this.total = res.data.total;
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val;
      this.loadTableData();
    },
    handleSizeChange (val) {
      this.page_size = val;
      this.loadTableData();
    },
    currentChange (val) {
      this.pageNo = val;
      this.loadTableData();
    },
    // 编辑
    handleEdit (index, row) {
      this.windowVisible = true;
      this.addOperate = false;
      this.$nextTick(() => {
        let copy = Object.assign({}, row); // row是所编辑本行内数据对象
        this.thisEditRow = copy;
        this.$refs.popWindow.dataInit(copy);
        // this.$refs.popWindow.dataInit(row);
      });
    },
    closeWindow () {
      this.windowVisible = false;
    },
    updateWindow () {
      this.windowVisible = false;
      this.loadTableData();
    }
  }
};
</script>
